<template>
	<view class="">
		<!-- 上面动态切换 -->

		<view class="title-view">
			<text @tap="changeIndex(index)" class="text-view" :class="{'active':currentIndex==index}"
				v-for="(item,index) in list" :key="item">{{item}}</text>
		</view>

		<swiper :current="currentIndex" @change="changetab" style="height:100vh">
			<swiper-item>
				<scroll-view scroll-y="true" class="aacb" style="position: relative;">
					<!-- <view style="position: absolute;width:100rpx;height:100rpx;right:10rpx;top:15rpx;display: flex;"> -->
					<!-- <view style="width:40rpx;height:40rpx;margin-top:10rpx"v-if="xs" @tap="sc">
						<image style="width:100%;height:100%;" src="../../static/images/fq/sc.png" mode=""></image>
					</view>	
					<view style="width:35rpx;height:35rpx;margin-top:8rpx" v-else @tap='scs'>
						<image  style="width:100%;height:100%;" src="../../static/images/fq/ax.png" mode=""></image>
					</view>	
					<view style="width:50rpx;height:50rpx;" v-if="dz" @tap="dzs">
						<image style="width:100%;height:100%" src="../../static/images/fq/dz.png" mode=""></image>
						</view>
					<view style="width:60rpx;height:60rpx;" v-else @tap="dzt">
						<image style="width:100%;height:100%" src="../../static/images/fq/z.png" mode=""></image>
						</view>	 -->
					<!-- </view> -->
					<view v-if="currentIndex == 0">
						<view class="chargeDtailPage">
							<view class="head">
								<image style="height:100%;width:100%" :src="spData.photo" mode="">
								</image>
							</view>
							<view style="background-color: white;height:300rpx">
								<view style="width:750rpx;height:60rpx;">
									<view class="chargeDtailPage-topprices">
										<text class="redprice">￥{{spData.price}}.00</text>
										<text style="color:#999999;margin-left:20rpx">vip:280</text>
									</view>
								</view>


								<view style="width:720rpx;">
									<view class="chargeDtailPage-topprices">
										<view class="te">{{spData.name}}</view>

									</view>
								</view>

								<view class="bz">
									<view class="bz1">
										正品保障
									</view>
									<view class="bz1">
										会员优惠
									</view>
									<view class="bz1">
										产品价保
									</view>
								</view>
								<view style="display: flex;">
									<view style="margin-left:40rpx;color:#C0C0C0;font-size: 25rpx;">
										商品已挂平台担保，正品保障，支持防卫查询
									</view>
									<view class="z">
										正
									</view>
								</view>
							</view>
							<!-- 上面充电站标题部分 -->
							<view class="chargeDtailPage-top" style="height:870rpx">
								<view style="display: flex;width:650rpx;border-bottom:2rpx solid #C0C0C0;height:50rpx">
									<view class="yx">
										已选
									</view>
									<view class="yx1">
											{{spData.name?spData.name.substring(0,15):""}}...
										
									</view>
								</view>
								<view style="display: flex;width:710rpx;height:40rpx">
									<view class="yx" style="margin-top: 15rpx;">
										地址
									</view>
									<view class="yx1" style="margin-top: 20rpx;">
										四川省成都市武侯区草金南路一段大道口
									</view>
									<view class="yx1"
										style="margin-top: 15rpx;font-size: 30rpx;color:red;font-weight: 800;">
										配送到店
									</view>
								</view>
								<view class="userComments">
									<view style="display: flex;margin-top:25rpx">


										<view
											style="width:10rpx;height:10rpx;border-radius: 10rpx;margin-top:15rpx;background-color:orange;margin-left:-15rpx;">

										</view>
										<view class="userComments-yypl" style="margin-left:10rpx;display: flex;">
											<view style="width:70rpx">
												<text>评论</text>
											</view>
											<text
												style="font-size: 22rpx;margin-left:10rpx;color: #999999;margin-top: 5rpx;">2.7w+</text>
											<text
												style="margin-left: 310rpx;font-size: 25rpx;color:red;margin-top: 5rpx;">3392</text><text
												style="font-size: 25rpx;margin-top: 5rpx;">条好评</text>
											<view style="width:30rpx;height: 30rpx;margin-top:6rpx">
												<image style="width:100%;height:100%"
													src="../../static/images/fq/xy.png" mode=""></image>
											</view>
										</view>
									</view>
									<!-- 每一项评论 -->
									<view class="userComments-contents">
										<!-- 评论头像 -->
										<view class="userComments-leftimg">
											<image class="userComments-leftimgicon" src="../../static/images/fq/dl.png"
												mode="">
											</image>
										</view>

										<!-- 评论详情 -->
										<view class="userComments-middledetail">
											<view class="userComments-telephone">
												185<text>****</text>8845
											</view>

											<view class="userComments-picture">
												<image class="userComments-pictureitem" v-for="item in 5" :key="item"
													src="../../static/images/fq/xx.png" mode=""></image>
											</view>
											<view class="userComments-detail">
												<text>费用很便宜，离家近还方便~~~</text>
											</view>

											<view class="userComments-data">
												<text>2021-02-15</text>
											</view>

										</view>

										<!-- 右边点赞 -->


									</view>

									<!-- 每一项评论 -->
									<view class="userComments-contents">
										<!-- 评论头像 -->
										<view class="userComments-leftimg">
											<image class="userComments-leftimgicon" src="../../static/images/fq/dl1.png"
												mode="">
											</image>
										</view>

										<!-- 评论详情 -->
										<view class="userComments-middledetail">
											<view class="userComments-telephone">
												185<text>****</text>8845
											</view>

											<view class="userComments-picture">
												<image class="userComments-pictureitem" v-for="item in 5" :key="item"
													src="../../static/images/fq/xx.png" mode=""></image>
											</view>
											<view class="userComments-detail">
												<text>费用很便宜，离家近还方便~~~</text>
											</view>

											<view class="userComments-data">
												<text>2021-02-15</text>
											</view>

										</view>

										<!-- 右边点赞 -->


									</view>
								</view>
								
								<view class="userComments-yypl"
									style="margin-left:10rpx;display: flex;">
									<view
										style="width:10rpx;height:10rpx;border-radius: 10rpx;background-color:orange;margin-left:-25rpx;margin-top:15rpx">
									
									</view>
									<view style="margin-left:10rpx">买家秀</view>
									<view
										style="font-size: 22rpx;color: #999999;margin-top: 6rpx;margin-left:10rpx">358+</view>
									<view style="font-size: 25rpx;margin-top: 4rpx;margin-left:340rpx;">查看全部</view>
									<view style="width:30rpx;height: 30rpx;margin-top: 8rpx;">
										<image style="width:100%;height:100%" src="../../static/images/fq/xy.png"
											mode=""></image>
									</view>
								</view>
								<view class="aac">
									<view class="aac1">
										<image style="width:100%;height:100%" src="../../static/images/fq/mj1.png"
											mode="aspectFill"></image>
									</view>
									<view class="aac1">
										<image style="width:100%;height:100%" src="../../static/images/fq/mj2.png"
											mode="aspectFill"></image>
									</view>
									<view class="aac1">
										<image style="width:100%;height:100%" src="../../static/images/fq/mj3.png"
											mode="aspectFill"></image>
									</view>
									<view class="aac1">
										<image style="width:100%;height:100%" src="../../static/images/fq/mj4.png"
											mode="aspectFill"></image>
									</view>
								</view>
							</view>


							<!-- 电站信息 -->
							<view class="chargeInfor">
								<!-- 标题 -->

								<!-- 电站信息 -->
								<view class="chargeInfor-detailInfor" style="width:670rpx;margin-left:30rpx">
									<view style="display: flex;">
										<view class="chargeInfor-titletop" style="width:150rpx;">
											<text class="chargeInfor-yyxq">车友提问</text>



										</view>
										<view class="">
											<text style="margin-left:320rpx;font-size: 28rpx;">查看全部</text>

										</view>
										<view style="width:30rpx;height: 30rpx;">
											<image style="width:100%;height:100%;margin-top:7rpx"
												src="../../static/images/fq/xy.png" mode=""></image>
										</view>
									</view>

									<view style="width:650rpx;height:60rpx;display: flex;">
										<view style="width:60rpx;height:60rpx;">
											<image style="width:100%;height:100%" src="../../static/images/fq/w.png"
												mode=""></image>
										</view>
										<view style="width:450rpx;height:60rpx;line-height: 60rpx;font-size: 27rpx;">
											车友们，这个比壳牌哪个好用些
										</view>
										<view
											style="width:160rpx;height:60rpx;line-height: 60rpx;text-align: center;font-size: 23rpx;color: #999999;">
											2个回复
										</view>
									</view>
									<view style="width:650rpx;height:60rpx;display: flex;">
										<view style="width:60rpx;height:60rpx;">
											<image style="width:100%;height:100%" src="../../static/images/fq/w.png"
												mode=""></image>
										</view>
										<view style="width:450rpx;height:60rpx;line-height: 60rpx;font-size: 27rpx;">
											吉利金刚可用用吗，比这个好用吗？
										</view>
										<view
											style="width:160rpx;height:60rpx;line-height: 60rpx;text-align: center;font-size: 23rpx;color: #999999;">
											2个回复
										</view>
									</view>

								</view>

							</view>


							<view
								style="width:750rpx;height:100rpx;background-color: white;position: fixed;bottom:0;display: flex;">
								<view style="width:100rpx;height:100rpx;margin-left:20rpx">
									<image style="width:60%;height:60%;margin-left:20rpx"
										src="../../static/icons/common/icon_tab_market@3x.png" mode=""></image>
									<view style="font-size: 23rpx;text-align: center;">
										店铺
									</view>
								</view>

								<view style="width:100rpx;height:100rpx;margin-left:20rpx">
									<!-- <navigator url="/pages/dialog/dialog"> -->
									<image style="width:60%;height:60%;margin-left:20rpx"
										src="../../static/icons/common/icon_tab_mine@3x.png" mode=""></image>
									<!-- </navigator> -->
									<view style="font-size: 23rpx;text-align: center;">
										客服
									</view>
								</view>


								<view style="width:500rpx ;height:100rpx;display: flex;">
									<view
										style="width:200rpx;height:70rpx;margin-left:50rpx;border-radius: 35rpx;line-height: 70rpx;text-align: center;background-color:orange ;color:white;margin-top:10rpx">
										加入购物车
									</view>
									<view
										style="width:200rpx;height:70rpx;margin-left:20rpx;border-radius: 35rpx;line-height: 70rpx;text-align: center;background-color:red;color:white;margin-top:10rpx ">
										立即购买
									</view>

								</view>
							</view>

						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<view v-if="currentIndex == 1"><text>选项卡2的内容</text></view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y="true" class="aacc">
					<view v-if="currentIndex == 2">
						<view class="chargeInfor">
							<!-- 标题 -->

							<!-- 电站信息 -->
							<view class="chargeInfor-detailInfor" style="margin-left:30rpx">
								<view style="display: flex;">
									<view class="chargeInfor-titletop" style="width:150rpx;">
										<text class="chargeInfor-yyxq">车友提问</text>



									</view>
									<view class="">
										<text style="margin-left:300rpx;font-size: 28rpx;">查看全部</text>

									</view>
									<view style="width:30rpx;height: 30rpx;">
										<image style="width:100%;height:100%;margin-top:6rpx"
											src="../../static/images/fq/xy.png" mode="aspectFill"></image>
									</view>
								</view>

								<view style="width:650rpx;height:60rpx;display: flex;">
									<view style="width:60rpx;height:60rpx;">
										<image style="width:100%;height:100%" src="../../static/images/fq/w.png"
											mode=""></image>
									</view>
									<view style="width:450rpx;height:60rpx;line-height: 60rpx;font-size: 27rpx;">
										车友们，这个比壳牌哪个好用些
									</view>
									<view
										style="width:160rpx;height:60rpx;line-height: 60rpx;text-align: center;font-size: 23rpx;color: #999999;">
										2个回复
									</view>
								</view>
								<view style="width:650rpx;height:60rpx;display: flex;">
									<view style="width:60rpx;height:60rpx;">
										<image style="width:100%;height:100%" src="../../static/images/fq/w.png"
											mode=""></image>
									</view>
									<view style="width:450rpx;height:60rpx;line-height: 60rpx;font-size: 27rpx;">
										吉利金刚可用用吗，比这个好用吗？
									</view>
									<view
										style="width:160rpx;height:60rpx;line-height: 60rpx;text-align: center;font-size: 23rpx;color: #999999;">
										2个回复
									</view>
								</view>

							</view>
						</view>

					</view>

					<view style="width:100%;height:10000rpx">
						<image style="width:100%;height:100%;" src="../../static/images/fq/c.png" mode="aspectFit">
						</image>
					</view>
					<view style="width:100%;height:1000rpx;margin-top: 20rpx;">
						<view style="height:48%;width:100%;;display: flex;">
							<view style="width:50%;height:100%;">
								<view style="height:70%;">
									<image style="width:100%;height:100%" src="../../static/images/fq/y.png" mode="">
									</image>
								</view>
								<view style="height:28%;font-size: 22rpx;padding:25rpx">
									美孚(Mobil)美孚速霸2000全合成机油 5W-4W
									<view style="color:red;font-weight: 800;">
										￥69.00
										<text style="margin-left:130rpx;color:#999999;">20人付款</text>
									</view>
								</view>
							</view>
							<view style="width:50%;height:100%;font-size: 22rpx;">
								<view style="height:70%;">
									<image style="width:100%;height:100%" src="../../static/images/fq/y1.png" mode="">
									</image>
								</view>
								<view style="height:30%;font-size: 22rpx;padding:25rpx">
									亮牌(Shell)全合成机油汽车润滑油 汽车机油发动机
									<view style="color:red;font-weight: 800;">
										￥69.00
										<text style="margin-left:130rpx;color:#999999;">20人付款</text>
									</view>
								</view>
							</view>
						</view>
						<view style="height:48%;width:100%;;display: flex;">
							<view style="width:50%;height:100%;">
								<view style="height:70%;">
									<image style="width:100%;height:100%" src="../../static/images/fq/y2.png" mode="">
									</image>
								</view>
								<view style="height:30%;font-size: 22rpx;padding:25rpx">
									福特(FORD)原厂几率(新蒙迪欧/翼虎/致胜)
									<view style="color:red;font-weight: 800;">
										￥69.00
										<text style="margin-left:130rpx;color:#999999;">20人付款</text>
									</view>
								</view>

							</view>
							<view style="width:50%;height:100%;">
								<view style="height:70%;">
									<image style="width:100%;height:100%" src="../../static/images/fq/y3.png" mode="">
									</image>
								</view>
								<view style="height:30%;font-size: 22rpx;padding:25rpx">
									亮牌(Shell)发动机清洗油4L 汽车用品
									<view style="color:red;font-weight: 800;">
										￥69.00
										<text style="margin-left:130rpx;color:#999999;">20人付款</text>
									</view>
								</view>
							</view>
						</view>
						<view style="width:100%;height:40rpx;text-align: center;color: #C0C0C0;">
							到底了...
						</view>
					</view>

				</scroll-view>

			</swiper-item>
			<swiper-item>
				<view v-if="currentIndex == 3"><text>选项卡4的内容</text></view>
			</swiper-item>

		</swiper>
		<view>


			<view style="width:750rpx;height:100rpx;background-color: white;position: fixed;bottom:0;display: flex;">
				<view style="width:100rpx;height:100rpx;margin-left:20rpx">
					<image style="width:60%;height:60%;margin-left:20rpx"
						src="../../static/icons/common/icon_tab_market@3x.png" mode=""></image>
					<view style="font-size: 23rpx;text-align: center;">
						店铺
					</view>
				</view>
				<view style="width:100rpx;height:100rpx;margin-left:20rpx">
					<image style="width:60%;height:60%;margin-left:20rpx"
						src="../../static/icons/common/icon_tab_mine@3x.png" mode=""></image>
					<view style="font-size: 23rpx;text-align: center;">
						客服
					</view>
				</view>
				<view style="width:500rpx ;height:100rpx;display: flex;">
					<view
						style="width:200rpx;height:70rpx;margin-left:50rpx;border-radius: 35rpx;line-height: 70rpx;text-align: center;background-color:orange ;color:white;margin-top:10rpx">
						加入购物车
					</view>
					<!-- <navigator url="/pages/order_store/order_store"> -->
						<view
							style="width:200rpx;height:70rpx;margin-left:20rpx;border-radius: 35rpx;line-height: 70rpx;text-align: center;background-color:red;color:white;margin-top:10rpx " @tap='gm'>
							立即购买
						</view>
					<!-- </navigator> -->
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		createNamespacedHelpers
	} from "vuex";
	let {
		mapActions,mapMutations,mapState
	} = createNamespacedHelpers('goods');
	export default {
		data() {
			return {
				list: ["商品", "评价", "详情", "推荐"],
				swiper: ["A", "B", "C", "D"],
				currentIndex: 0,
                goodsid:'',
				xs:true,
				dz:true
			}
		},
		methods: {
			...mapActions(['finid','ljgm','ljsc']),
			changeIndex(index) {
				this.currentIndex = index;
			},
			changetab(e) {
				this.currentIndex = e.detail.current;
			},
			
			spxq(data) {
			this.finid(data)
			},
         async gm(){
				const ids = uni.getStorageSync('id')
				if(ids){
					const data=await this.ljgm({userId:ids,goodsId:this.goodsid})
					
					if (data.result==true){
					uni.navigateTo({
						url:'/pages/order_store/order_store'
					})
					}
				}else{
					uni.navigateTo({
						url: '/pages/loginLx/loginLx',
					
					});
				}
			
			
			},
			sc(){
				this.xs=false
				const ids = uni.getStorageSync('id')
			
				
				this.ljsc({user_id:ids,goods_id:this.goodsid})
			},
			scs(){
				this.xs=true
			},
			dzs(){
				this.dz=false
			},
			dzt(){
				this.dz=true
			}
		},
		onLoad (options){
			this.spxq({goodsId:options.id})
			this.goodsid = options.id-0;
		},
	
		computed:{
			...mapState(['spData'])
		},
	}
</script>

<style scoped lang="scss">
	.aacb {
		height: calc(100vh)
	}

	.aacc {
		height: calc(100vh - 100rpx)
	}

	.aac {
		margin-top: 10rpx;
		display: flex;
		width: 660rpx;
		height: 200rpx;
		justify-content: space-between;

	}

	.aac1 {
		padding: 0;
		width: 23%;
		height: 100%;

	}

	.yx {
		font-size: 30rpx;
		font-weight: 900;
	}

	.yx1 {
		margin-left: 20rpx;
		font-size: 25rpx;
		margin-top: 5rpx
	}

	.z {
		width: 30rpx;
		height: 30rpx;
		border: 1rpx solid red;
		border-radius: 30rpx;
		font-size: 20rpx;
		text-align: center;
		margin-left: 10rpx;
		color: red
	}

	.bz1 {
		width: 150rpx;
		height: 40rpx;
		border-radius: 50rpx;
		border: 1rpx solid red;
		margin-left: 40rpx;
		text-align: center;
		color: red;
		margin-top:10rpx
	}

	.bz {
		width: 750rpx;
		height: 60rpx;
		text-align: center;
		// margin-top: 12rpx;
		display: flex;
		// padding-top:20rpx
	}

	.te {

		margin-left: 45rpx;
		color: #333333;
		font-weight: 700;
	}

	.redprice {
		color: #eb1313;
		font-size: 42rpx;
		font-weight: 700;
		margin-left: 30rpx
	}

	.head {
		width: 750rpx;
		height: 750rpx;
		border: 1rpx solid red($color: #000000)
	}

	.chargeDtailPage {
		margin-bottom: 100rpx;


		// 充电站上面部分
		.chargeDtailPage-top {
			padding: 25rpx;
			width: 680rpx;
			margin: 20rpx auto;
			height: 230rpx;
			background-color: white;
			// display: flex;

			border-radius: 30rpx;

			// 充电站左边图片 
			.chargeDtailPage-top-image {
				width: 260rpx;
				height: 210rpx;
			}

			// 充电站中间详情
			.chargeDtailPage-top-content {
				width: 320rpx;
				// padding: 0rpx 20rpx 10rpx 20rpx;

				.chargeDtailPage-title {
					font-size: 32rpx;
					margin-bottom: 10rpx;
					font-weight: 700;
				}

				.chargeDtailPage-topaddress {
					font-size: 22rpx;
					color: #919191;
					margin-bottom: 10rpx;
				}

				.chargeDtailPage-toptags {
					.tagsitems {
						font-size: 20rpx;
						background-color: #e8e8e8;
						border-radius: 10rpx;
						// padding: 6rpx;
						margin: 20rpx 10rpx 20rpx 0rpx;
					}

				}

				.chargeDtailPage-topprices {
					// color: gray;
					font-size: 24rpx;
					margin: 10rpx 0rpx;

					.redprice {

						font-size: 32rpx;
						font-weight: 700;
					}
				}

			}


			// 充电站右边导航
			.chargeDtailPage-toprigghtnav {
				width: 80rpx;
				text-align: center;

				.chargeDtailPage-rightimage {
					margin-top: 60rpx;
					width: 60rpx;
					height: 60rpx;
				}

				.chargeDtailPage-righttitle {
					font-size: 24rpx;
					color: gray;
				}

			}
		}

		//电站信息
		.chargeInfor {
			padding: 15rpx;
			width: 720rpx;

			.chargeInfor-detail {
				border-left: 6rpx solid #f5610c;
				padding-left: 10rpx;
				margin-bottom: 20rpx;
				font-size: 32rpx;
				font-weight: 700;
			}

			.chargeInfor-detailInfor {
				background-color: white;
				border-radius: 30rpx;
				padding: 20rpx 0rpx 20rpx 30rpx;

				.chargeInfor-titletop {
					// border-bottom: 2rpx solid #e6e6e6;
					margin-bottom: 10rpx;
					padding-bottom: 10rpx;

					.chargeInfor-yyxq {
						border-left: 6rpx solid #f5610c;
						padding-left: 10rpx;
						font-size: 28rpx;
					}

					.kfitems {
						font-size: 28rpx;
						color: #949494;
						margin: 10rpx;
					}
				}

				.chargeInfor-titlearoud {
					.chargeInfor-zbss {
						border-left: 6rpx solid #f5610c;
						padding-left: 10rpx;
						font-size: 28rpx;
					}
				}

				.chargeInfor-list {
					display: flex;
					margin-top: 10rpx;

					.chargeInfor-listitem {
						width: 100rpx;
						text-align: center;
						padding: 10rpx 25rpx;

						.chargeInfor-listimg {
							width: 100rpx;
							height: 100rpx;
						}

						.chargeInfor-listtext {
							font-size: 24rpx;
							color: gray;
						}
					}

				}
			}
		}

		// 用户评论
		.userComments {
			margin-top: 20rpx;

			.userComments-yypl {
				// border: 1rpx solid #f5610c;
				// margin-left:10rpx;
				// padding-left: 10rpx;
				margin-bottom: 20rpx;
				font-size: 30rpx;
				font-weight: 700;
			}

			.userComments-contents {
				background-color: white;
				border-radius: 30rpx;
				padding: 20rpx;
				margin-top: 15rpx;
				display: flex;
				margin-bottom: 2rpx;
				border: 1px solid red;

				// 左边头像
				.userComments-leftimg {
					.userComments-leftimgicon {
						width: 100rpx;
						height: 100rpx;
					}

				}

				// 中间评论
				.userComments-middledetail {
					width: 460rpx;
					padding-left: 20rpx;

					.userComments-telephone {
						color: gray;
						font-size: 24rpx;
					}

					.userComments-picture {
						.userComments-pictureitem {
							width: 30rpx;
							height: 30rpx;
						}
					}

					.userComments-detail {
						font-size: 26rpx;
						margin-bottom: 20rpx;
					}

					.userComments-data {
						font-size: 24rpx;
						color: gray;
					}

				}

				.userComments-rightlikes {
					width: 96rpx;
					padding-top: 60rpx;

					.userComments-rightlikesicon {
						width: 60rpx;
						height: 60rpx;
						vertical-align: middle;
					}

					.userComments-rightlikestext {
						font-size: 24rpx;
					}
				}
			}
		}

		// 查看全部
		.lookall {
			text-align: center;
			font-size: 28rpx;
			color: #f5742a;
		}

		// 扫一扫
		.userScan {
			display: flex;
			padding: 20rpx;
			margin: 40rpx;
			border-radius: 100rpx;
			background-color: white;
			maigin-bottom: 100rpx;

			.userScan-click {
				width: 300rpx;
				display: flex;
				padding-left: 20rpx;

				.userScan-clickItem {
					width: 60rpx;
					padding: 0rpx 20rpx;
					text-align: center;

					.userScan-clickItemimg {
						width: 50rpx;
						height: 50rpx;
						margin: 0rpx;
						padding: 0rpx;
					}

					.userScan-clickItemtext {
						color: gray;
						font-size: 24rpx;
						margin-top: 0rpx;
					}
				}
			}

			// 扫一扫
			.userScan-scan {
				background-color: #f5610c;
				border-radius: 80rpx;
				color: white;
				text-align: center;
				width: 250rpx;
				height: 80rpx;
				line-height: 80rpx;
				margin-left: 40rpx;
				margin-top: 16rpx;
				font-size: 30rpx;
			}

		}
	}

	.title-view {
		display: flex;
	}

	.text-view {
		flex-grow: 1;
		line-height: 80rpx;
		text-align: center;
	}

	.active {
		color: red
	}

	.chargeInfor {
		padding: 15rpx;
		width: 720rpx;

		.chargeInfor-detail {
			border-left: 6rpx solid #f5610c;
			padding-left: 10rpx;
			margin-bottom: 20rpx;
			font-size: 32rpx;
			font-weight: 700;
		}

		.chargeInfor-detailInfor {
			background-color: white;
			border-radius: 30rpx;
			padding: 20rpx 0rpx 20rpx 30rpx;

			.chargeInfor-titletop {
				// border-bottom: 2rpx solid #e6e6e6;
				margin-bottom: 10rpx;
				padding-bottom: 10rpx;

				.chargeInfor-yyxq {
					border-left: 6rpx solid #f5610c;
					padding-left: 10rpx;
					font-size: 28rpx;
				}

				.kfitems {
					font-size: 28rpx;
					color: #949494;
					margin: 10rpx;
				}
			}

			.chargeInfor-titlearoud {
				.chargeInfor-zbss {
					border-left: 6rpx solid #f5610c;
					padding-left: 10rpx;
					font-size: 28rpx;
				}
			}

			.chargeInfor-list {
				display: flex;
				margin-top: 10rpx;

				.chargeInfor-listitem {
					width: 100rpx;
					text-align: center;
					padding: 10rpx 25rpx;

					.chargeInfor-listimg {
						width: 100rpx;
						height: 100rpx;
					}

					.chargeInfor-listtext {
						font-size: 24rpx;
						color: gray;
					}
				}

			}
		}
	}
</style>
